<template>
  <div class="video">
    <div class="title-box">
      <div class="title-name">操作视频</div>
       <moreDropdownMenu :routerConfig="routerListCofig"></moreDropdownMenu>
    </div>
    <div  v-if="!newVideoObj.videoName" class="no-data">
      <img src="https://mt.heng-tai.com.cn/m-perfeval-pc/img/pc-other_zwsj_icon.4c654fe.png" alt="">
      <div>暂无数据</div>
    </div>
    <div v-else class="video">
      <Video :playerOptions = "playerOptions" @onPlayerPlay = "onPlayerPlay" @onPlayerPause = "onPlayerPause"></Video>
      <div class="video-name" v-if="video_name_show">最新视频： {{ newVideoObj.videoName || '--' }}</div>
    </div>
  </div>
</template>

<script>
import moreDropdownMenu from '@/moduleComponents/newWorkbench/more-dropdown-menu';
import Video from '@/moduleComponents/newWorkbench/video';
import { workbenchTrainVideoGetNew } from '@const/mDataCenterApi.js';
export default {
  name: 'OperatioVideo',
  components: {
    Video,
    moreDropdownMenu
  },
  data() {
    return {
      newVideoObj: {},
      routerListCofig: [
        {
          path: '/todoNoticeSet',
          label: '待办通知设置'
        }
      ],
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4',
            src: ''
          }
        ],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      video_name_show: true
    };
  },
  created() {
    this.getNewVideo();
  },
  methods: {
    getNewVideo() {
      this.$axios({
        url: workbenchTrainVideoGetNew,
        method: 'post'
      })
        .then(res => {
          this.newVideoObj = res.data.payload || {};
          this.playerOptions.sources[0].src = this.newVideoObj.videoUrl || '';
          console.log(res, 'er');
        })
        .catch(err => {
          console.log(err);
        });
    },
    findVideoMore() {
      this.$router.push({
        path: '/newWorkbench/videoList'
      });
    },
    // 播放
    onPlayerPlay($event) {
      this.video_name_show = false;
    }, // 暂停
    onPlayerPause($event) {
      this.video_name_show = true;
    }
  }
};
</script>

<style scoped lang="less">
.video {
  position: relative;
  .video-name {
    position: absolute;
    bottom: 0;
    font-size: 14px;
    color: #fff;
    width: 100%;
    background: rgba(0, 0, 0, 0.56);
    height: 35px;
    padding-left: 15px;
    box-sizing: border-box;
    line-height: 35px;
    margin-bottom: 43px;
  }
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 48px;
    background-image: linear-gradient(to right, #e6edff, #fff);
    padding: 0 0 0 15px;
    box-sizing: border-box;
  }
  .title-name {
    font-size: 15px;
    color: #333333;
  }
  .news-name {
    width: 167px;
    height: 34px;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .news-date {
    width: 120px;
    height: 34px;
    font-size: 14px;
    color: #999999;
  }
  .content-item {
    line-height: 34px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .no-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 14px;
    color: #999999;
    margin-top: -15px;
    img {
      width: 172px;
      height: 100px;
      margin-bottom: 17px;
    }
  }
}
</style>
